<template>
	<view>
		<view style="height: 2vh;"></view>
		<view class="work">
			<view class="info-text" @click="gostatar">
				<view class="work-title" v-if="isshow == true">
					工作中
				</view>
				<view class="work-title" v-else>
					开始工作
				</view>
				<view class="work-text">
					预期收益：{{info.workrate}}云矿石
				</view>
				<view class="work-text2">
					<view>
						倒计时：
					</view>
					<view>
						<u-count-down :time="info.timeend * 1000" format="HH:mm:ss" :autoStart="isshow" millisecond
							@change="onChange">
							<view class="time">
								<view class="time__custom">
									<text
										class="time__custom__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours ||'00'}}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.minutes ||'00'}}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.seconds ||'00'}}</text>
								</view>
							</view>
						</u-count-down>
					</view>
				</view>
			</view>

			<image class="image"
				:style="isshow == true?'animation-play-state: running;':'animation-play-state: paused;'"
				src="/static/home/work-bg2.png" mode=""></image>
		</view>
		<view class="content">
			<view class="title">
				新人大礼包
			</view>
			<view class="gift">
				<view class="gift-left" @click="goDetails()">
					<view class="left-box">
						<image :src="list.logo" mode=""></image>
						<view class="top-right">
							<view class="left-title">
								{{list.name||'一号工厂'}}
							</view>
							<view class="day">
								每日返本返息
							</view>
						</view>
					</view>
					<view class="info">
						<view class="info-item">
							<image src="/static/home/icon1.png" mode=""></image>
							<view class="item-box">
								<view class="item-num">
									{{list.proportion ||'0.00'}}
								</view>
								<view class="item-text">
									已出售
								</view>
							</view>
						</view>
						<view class="info-item">
							<image src="/static/home/icon2.png" mode=""></image>
							<view class="item-box">
								<view class="item-num">
									{{list.rate || '0.00'}}%
								</view>
								<view class="item-text">
									日产量
								</view>
							</view>
						</view>
						<view class="info-item">
							<image src="/static/home/icon3.png" mode=""></image>
							<view class="item-box">
								<view class="item-num">
									{{list.price || '0.00'}}
								</view>
								<view class="item-text">
									云矿石
								</view>
							</view>
						</view>
						<view class="info-item">
							<image src="/static/home/icon4.png" mode=""></image>
							<view class="item-box">
								<view class="item-num">
									{{list.days || '30'}}<text>天</text>
								</view>
								<view class="item-text">
									工作时间
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="gift-right" @click="goDetails()">
					<view class="right-cont">
						<image src="/static/home/gift.png" mode=""></image>
						<view class="right-text">
							点我点我!
						</view>
					</view>
				</view>
			</view>
			<view class="title">
				资产
			</view>
			<view class="asset">
				<view class="asset-item">
					<view class="asset-text">
						累计工作收益
					</view>
					<view class="asset-num">
						{{info.allReward||'0'}}
					</view>
				</view>
				<view class="asset-item asset-bg">
					<view class="asset-text">
						工厂推荐收益
					</view>
					<view class="asset-num">
						{{info.sc_Reward||'0'}}
					</view>
				</view>
			</view>
			<view class="invite">
				<image @click="gonavto('/pages/home/invite/index')" class="invite_img" src="/static/home/invite.png"
					mode=""></image>
				<view class="invite-box">
					<view class="invite-item" @click="gogeam()">
						<view class="invite-text">
							我的工卡
						</view>
						<image src="/static/home/right.png" mode=""></image>
					</view>
					<view class="invite-item invite-bg" @click="gotabto()">
						<view class="invite-text">
							拼团游戏
						</view>
						<image src="/static/home/right.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<u-overlay :show="show" @click="show = false">
			<view class="warp">
				<image class="icon" src="../../static/home/noc.png" mode=""></image>
				<view class="title">{{title}}</view>
				<view class="cont" v-html="description"></view>
				<view class="btn" @click="show = false">
					我知道了
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isshow: false,
				timeData: {},
				info: {},
				list: {},
				title: '',
				description: '',
				show: false
			}
		},
		onLoad() {
			this.nocpost()
		},
		onShow() {
			this.islogin()
			this.workstart()
			this.getList()
			this.$store.dispatch('connectRongCloud')
		},
		methods: {
			nocpost() {
				this.$Request({
					method: 'POST',
					url: '/api/index/indexNotice',
					data: {}
				}).then(res => {
					if (res.code == 1) {
						this.title = res.data.title
						this.description = res.data.description
						if(this.title!=''){
							this.show = true
						}
					}
				})
			},
			goDetails() {
				uni.navigateTo({
					url: '/pages/factory/details/index?id=' + this.list.id + '&isshow=true'
				})
			},
			gogeam() {
				uni.navigateTo({
					url: '/pages/home/my_card/index'
				})
			},
			gotabto() {
				// uni.showToast({
				// 	title:'暂未开放！',
				// 	icon:'none'
				// })
				uni.navigateTo({
					url: '/pages/home/team_work/index'
				})
				// uni.switchTab({
				// 	url:'/pages/factory/index'
				// })
			},
			getList() {
				this.$Request({
					method: 'POST',
					url: '/api/Product/productList',
					data: {
						page: 1,
						c_id: 1
					}
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data[0];
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			gostatar() {
				if (this.isshow == true) {
					uni.showToast({
						title: '工厂正在工作中...',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {

				}
				this.$Request({
					method: 'POST',
					url: '/api/personal/workstart',
					data: params
				}).then(res => {
					console.log(res)
					this.workstart()
				})
			},
			onChange(e) {
				this.timeData = e
			},
			workstart() {
				let params = {

				}
				this.$Request({
					method: 'POST',
					url: '/api/personal/myhomeindex',
					data: params
				}).then(res => {
					console.log(res)
					this.info = res.data
					if (this.info.status == 0) {
						this.isshow = false
					} else {
						this.isshow = true
					}
				})
			},
			islogin() {
				let token = uni.getStorageSync('token')
				if (token == '' || token == undefined) {
					uni.showToast({
						title: '请先登录！',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/index'
						})
					}, 1000)
					return
				}
			},
			gonavto(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #250F5A;
		background-image: url('../../static/home/home-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 937rpx;
	}
</style>
<style lang="scss" scoped>
	.warp {
		width: 616rpx;
		min-height: 507rpx;
		background-color: #4C3DD4;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 63%;
		position: relative;

		.icon {
			position: absolute;
			top: -80rpx;
			left: -40rpx;
			width: 224rpx;
			height: 224rpx;
		}

		.title {
			text-align: right;
			margin-top: 40rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #fff;
		}

		.cont {
			margin-top: 20rpx;
			padding: 30rpx;
			color: #fff;
			font-size: 26rpx;
			line-height: 140%;
		}
		.btn {
			width: 254rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			margin: 0 auto;
			background-image: linear-gradient( 90deg, #513AFD 0%, #D333FB 38%, #E146E1 50%, #CA33FB 64%, #5239FD 100%);
			color: #fff;
			border: 2rpx solid #CDA6FF;
			border-radius: 200rpx;
			margin-bottom: 20rpx;
			
		}
	}

	.work {
		margin: 0 auto;
		width: 522rpx;
		height: 522rpx;
		text-align: center;
		position: relative;
		margin-top: 30rpx;
		background-image: url('../../static/home/work-bg1.png');
		background-size: 522rpx 522rpx;
		background-repeat: no-repeat;

		.info-text {
			position: absolute;
			top: 185rpx;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 3;

			.work-title {
				font-size: 40rpx;
				font-weight: 600;
				color: #FFBDF1;
			}

			.work-text {
				margin-top: 15rpx;
				font-size: 24rpx;
				color: #ddd;
			}

			.work-text2 {
				margin-top: 15rpx;
				font-size: 24rpx;
				color: #ddd;
				display: flex;
				align-items: center;
				justify-content: center;

				.time {
					@include flex;
					align-items: center;

					&__custom {
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						justify-content: center;
						align-items: center;

						&__item {
							color: #fff;
							font-size: 12px;
							text-align: center;
						}
					}

					&__doc {
						color: #fff;
						padding: 0px 4px;
					}

					&__item {
						color: #606266;
						font-size: 15px;
					}
				}
			}
		}

		.image {
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			top: 13.5%;
			width: 370rpx;
			height: 370rpx;
			animation: rotate 5s linear infinite;
			z-index: 2;
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.content {
		padding: 0 30rpx 30rpx;

		.title {
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			padding: 30rpx 0;

		}

		.title:first-child {
			padding-top: 0;
		}

		.gift {
			display: flex;
			justify-content: space-between;

			.gift-left {
				width: 65%;
				background-color: rgba(255, 255, 255, .05);
				padding: 20rpx;
				border-radius: 20rpx;

				.left-box {
					display: flex;
					align-items: center;


					image {
						width: 104rpx;
						height: 104rpx;
						margin-right: 20rpx;
					}

					.top-right {
						color: #fff;

						.left-title {
							font-size: 32rpx;
							font-weight: 600;
						}

						.day {
							font-size: 24rpx;
							background-color: rgba(255, 255, 255, .05);
							padding: 5rpx 10rpx;
							border-radius: 10rpx;
							margin-top: 20rpx;
						}
					}
				}

				.info {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					color: #fff;

					.info-item {
						width: 205rpx;
						display: flex;
						align-items: center;
						margin-top: 30rpx;

						image {
							width: 73rpx;
							height: 73rpx;
						}

						.item-box {
							margin-left: 10rpx;

							.item-num {
								font-size: 32rpx;
								font-weight: 600;

								text {
									font-weight: 400;
									font-size: 24rpx;
								}
							}

							.item-text {
								color: #999;
								font-size: 24rpx;
								margin-top: 5rpx;
							}
						}
					}
				}
			}

			.gift-right {
				background-color: rgba(255, 255, 255, .05);
				padding: 30rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				text-align: center;

				.right-cont {
					image {
						width: 142rpx;
						height: 142rpx;
					}

					.right-text {
						font-size: 32rpx;
						margin-top: 30rpx;
						color: #fff;
						font-weight: 600;
					}
				}

			}
		}

		.asset {
			display: flex;
			justify-content: space-between;

			.asset-item {
				width: 48%;
				height: 153rpx;
				background-image: url('../../static/home/asset_1.png');
				background-repeat: no-repeat;
				background-size: 100% 153rpx;
				padding: 30rpx;
				color: #fff;
				font-weight: 600;

				.asset-text {
					font-size: 28rpx;
				}

				.asset-num {
					font-size: 44rpx;
					margin-top: 12rpx;
				}
			}

			.asset-bg {
				background-image: url('../../static/home/asset_2.png');
				background-repeat: no-repeat;
				background-size: 100% 153rpx;
			}
		}

		.invite {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.invite_img {
				width: 331rpx;
				height: 356rpx;
			}

			.invite-box {
				.invite-item {
					width: 331rpx;
					height: 166rpx;
					background-image: url('../../static/home/game2.png');
					background-repeat: no-repeat;
					background-size: 100% 166rpx;
					padding: 30rpx;

					.invite-text {
						color: #fff;
						font-size: 28rpx;
						font-weight: 600;
					}

					image {
						width: 39rpx;
						height: 39rpx;
						margin-top: 20rpx;
					}
				}

				.invite-bg {
					background-image: url('../../static/home/game1.png');
					margin-top: 30rpx;
				}
			}
		}
	}
</style>